/*
# Good article for @media screen and ...
# https://medium.com/theymakedesign/breakpoints-in-web-design-4e3b334066e8
*/

/* Big box with list of options */
/*
@media screen and (max-width: 579px)
@media screen and (min-width:570px) { Normale Bildschirme
@media screen and (max-width:569px) { Smartphones - Querformat
@media screen and (max-width:320px) { Smartphones - Hochformat kommt wohl nie zum tragen...
 */


/* 
	Dieser folgende import wurde ignoriert, da er nicht am Anfang stand
	Verschieben und
	Alles neu testen ???
@media screen and (max-width:320px) { // Smartphones - Hochformat 
@import url ("/style_mobile.css");
}
*/

#ajax_listOfOptions{
		position:absolute;	/* Never change this one */
		width:275px;	/* Width of box */
		height:250px;	/* Height of box */
		overflow:auto;	/* Scrolling features */
		border:1px solid #317082;	/* Dark green border */
		background-color:#FFF;	/* White background color */
		text-align:left;
		font-size:0.9em;
		z-index:100;
}
#ajax_listOfOptions div{	/* General rule for both .optionDiv and .optionDivSelected */
		margin:1px;
		padding:1px;
		cursor:pointer;
		font-size:0.9em;
}
#ajax_listOfOptions .optionDiv{	/* Div for each item in list */

}
#ajax_listOfOptions .optionDivSelected{ /* Selected item in the list */
		background-color:#317082;
		color:#FFF;
}
#ajax_listOfOptions_iframe{
		background-color:#F00;
		position:absolute;
		z-index:5;
}


/*
 * Fuer Darstellung modaler divs
 */
.Modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  /*padding-top: 100px;  Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
	
  -webkit-animation-name: fadeIn; /* Fade in the background */
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
  animation-duration: 0.4s
}

/* Modal Content */
.ModalContent {
  position: fixed; /* Stay in place */
	bottom: 0;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  /*
	width: 80%;
	*/

  -webkit-animation-name: fadeIn;
  -webkit-animation-duration: 0.4s;
  animation-name: fadeIn;
	/*
  animation-name: slideIn;
  -webkit-animation-name: slideIn;
  animation-duration: 0.4s
	*/
  animation-duration: 2s
}

/* The Close Button */
.ModalClose {
  /* color: #aaaaaa;*/
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.ModalClose:hover,
.ModalClose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.ModalHeader {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

.ModalBody {padding: 2px 16px;}

.ModalFooter {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

@-webkit-keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}

@keyframes fadeIn {
  from {opacity: 0} 
  to {opacity: 1}
}




/*
 * Fuer Webdesign Darstellung der Produkte
 */
div.ProductWebdesign {
  /*
   * Hauptcontainer pro Produkt
   */
	margin: 14px 20px;
  background-color: rgb(186,205,228);
  border:2px rgb(0,0,125);
	height: 150px;
  font-size: 13px;
  font-family: sansserif;
}

div.ProductImage {
  /*
   * Linker Teil von ProductImage
   */
  border:2px rgb(0,0,125);
  float:left;
  width: 18%;
  height: 100%;
}

div.ProductInfo1 {
  /*
   * Mittiger Teil von ProductImage
   */
  border:2px rgb(0,0,125);
  width: 50%;
  height: 100%;
}

div.ProductAuthor {
  /*
   * Teil von ProductInfo1
   */
}

div.ProductTitle {
  /*
   * Teil von ProductInfo1
   */
  font-size: 17px;
  font-family: sansserif;
	font-weight: bold;
}

div.ProductSubtitle {
  /*
   * Teil von ProductInfo1
   */
}

div.ProductShortText {
  /*
   * Teil von ProductInfo1
   */
	margin: 14px 14px;
}

div.ProductInfo2 {
  /*
   * Rechter Teil von ProductImage
   */
	border:2px rgb(0,0,125);
	float:right;
	width: 18%;
	height: 100%;
	clear: both;
}



/*
 * Umsatzsummen, die ueber der AnalyseEinzelUmsatz 'schwebt'
 */
div.UmsatzSummen {
	z-index: 1;
	/*
	position: absolute;
	position: sticky;
	*/
	position: fixed;
	top: 10px; right: 10px;
	/*
	width: 20%;
	height: 40%;
	*/
	border: 2px solid black;
	background-color: rgb(176,196,240);
	opacity: 80%;
	padding: 0.1% 0.1% 0.5% 0.5%;
}


/*
 * Menues (function MenueAusgabe)
 * Idee aus http://designyourweb.info/so-gehts-ein-schlankes-css3-dropdown-menu-erstellen/346
 *
 Noch ein Gutes: http://www.drweb.de/plus/designideen/menu-05/ausklappmenu-h.php5
 */

menutag {
	background-color: #D4D0C8; /* Standard-Farbe input button */
  /* width: 760px; */
	/* top/right/bottom/left */
	margin: 0px 0px 1px 0px;
  font-size: 70%;
	/* position:fixed; */
}
menutag ul {
	padding: 0px;
	margin: 0px 0px 2px;

	/* Aus https://neumorphism.io/#c0c0c0 */
	box-shadow:  5px 5px 10px #7d7d7d, -5px -5px 10px #ffffff;
	-webkit-box-shadow:  5px 5px 10px #7d7d7d, -5px -5px 10px #ffffff;
	/*
	box-shadow: 2px 2px 2px #dfdfdf;
	-moz-box-shadow: 2px 2px 2px #dfdfdf;
	-webkit-box-shadow: 2px 2px 2px #dfdfdf;
	*/

	/*
  opacity:0;
  transition:opacity 0.5s linear;
	hover:
  opacity:1;
	*/
}

menutag ul:after {
	content: " ";
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
	margin-bottom: 1px;

	clear: both;
}

menutag ul,menutag ul li{
	background-color: rgba(207, 207, 207, 1);
}

menutag ul li {
  list-style: none;
  float:left;

  border-right: 1px solid #dfdfdf;

  transition:opacity 0.5s linear;
}

menutag ul li a {
  text-decoration: none;
  display: block;
	/*
  color: #333;
          	Top, Right, Bottom, Left
  padding: 14px 34px 14px 34px;
	*/
  padding: 8px 10px 8px 10px;

	transition: background 0.3s ease-out; /* explorer 10 */
	-webkit-transition: background 0.3s ease-out; /* chrome & safari */
	-moz-transition: background 0.3 ease-out; /* firefox */
	-o-transition: background 0.3 ease-out; /* opera */
}
menutag ul li a img {
	height:12px;
}
img.menuimg {
	height:12px;
}
menutag ul li.cat:hover a, menutag ul li.cat:hover > ul li a  {
  /* background-color: rgb(0,0,125); */
}
/*
 * Wenn die menues unterschiedliche Farben haben sollen
menutag ul li.cat1:hover a, menutag ul li.cat1:hover > ul li a  {
    background-color: rgb(0,0,125);
}
 
menutag ul li.cat2:hover a, menutag ul li.cat2:hover > ul li a  {
    background-color: rgb(0,0,125);
}
menutag ul li.cat3:hover a, menutag ul li.cat3:hover > ul li a {
    background-color: rgb(0,0,125);
}
menutag ul li.cat4:hover a, menutag ul li.cat4:hover > ul li a {
    background-color: rgb(0,0,125);
}
menutag ul li.cat5:hover a, menutag ul li.cat5:hover > ul li a {
    background-color: rgb(0,0,125);
}
*/

menutag ul li:hover > a {
	/* Aktivierter Hauptpunkt */
  background-color: #8FB5E4;
	font-weight: bold;
  /* color: rgba(207, 207, 207, 1); */
  /* color: #FAFAFA; */
}
menutag ul li:hover > ul {
  visibility: visible;
  opacity:1;
}

menutag ul li ul{
  display: inline;
  visibility: hidden;
  position: absolute;
  padding:0px;
  opacity:0;
  transition:opacity 0.5s linear;
}
menutag ul li ul li{
	float: none;
}
menutag ul li ul li a {
  /* color: black; */
  /* color: #FAFAFA; */
}
menutag ul li ul li a:hover{
	/* color: #333; */
  background-color: #8FB5E4;
	/* background-color: #FAFAFA; */
}


/*
 * Fuer alle gleiche Definitionen
 */

/*
 * Aus https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown
 */

.topnav {
  overflow: hidden;
	background-color: #D4D0C8; /* Standard-Farbe input button */
  /* background-color: inherit; */
	color: white;
	font-size: 70%;
	clear: both;
	/* position: sticky; */
  /* min-width: 160px; */
}

.topnav:hover[position="fixed"]{
	height: 1000px;
	width: 1000px;
}

.topnavnc {	/* ==> topnav no collapse */
  overflow: hidden;
	background-color: #D4D0C8; /* Standard-Farbe input button */
  /* background-color: inherit; */
	color: white;
	font-size: 70%;
	clear: both;
  /* min-width: 160px; */
}

.topnav a {
  float: left;
  display: block;
	background-color: #D4D0C8; /* Standard-Farbe input button */
	color: black;
  /* color: #f2f2f2; */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /* font-size: 17px; */
	font-size: inherit;

  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.topnavnc a {
  float: left;
  display: block;
	background-color: #D4D0C8; /* Standard-Farbe input button // auch in online.src anpassen!!! */
	color: black;
  /* color: #f2f2f2; */
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /* font-size: 17px; */
	font-size: inherit;

  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.active {
	background-color: rgb(111,179,13);
  /* background-color: #4CAF50; */
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;

	background-color: #D4D0C8; /* Standard-Farbe input button */

  border-top: 1px solid #dfdfdf;
  border-right: 1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
}

.dropdown .dropbtn {
	background-color: #D4D0C8; /* Standard-Farbe input button */
  /* font-size: 17px;     */
	font-size: inherit;
  border: none;
  outline: none;
  color: black;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* background-color: #f9f9f9; */
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  /* padding: 12px 16px; */
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #8FB5E4;
  color: black;
	/*
			height= screen.height + "px";
			width= screen.width + "px";

			height= "";
			width= "";
	*/
}

.topnavnc a:hover, .dropdown:hover .dropbtn {
  background-color: #8FB5E4;
  color: black;
}

.dropdown-content a:hover {
  /* background-color: #ddd; */
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Ori: @media screen and (max-width: 600px) { */
/*@media screen and (max-width: 579px) {*/
@media screen and (max-width: 849px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
  /* .topnav a, .dropdown .dropbtn { */
    display: none;
	  min-width: 225px;
  }
  .topnav a.icon {
    float: right;
    display: block;
	  min-width: 10px;
  }


  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}


/*
 * Ende https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_responsive_navbar_dropdown
 */



 /*
  # davor --> Name einer class
	*/
#SuchVorschau {
	width: 100%;
  overflow: auto;
}

/*div.*/
#Merkmal_Liste {
  height: 20em;
  overflow: auto;
}

/*
div.overlay {
	display: none;
	z-index: 2;
	background: #000;
	position: fixed;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	text-align: center;
}
div.specialBox {
	display: none;
	position: relative;
	z-index: 3;
	margin: 150px auto 0px auto;
	width: 500px; 
	height: 300px;
	background: #FFF;
	color: #000;
}
*/

span.BI {
	/* color: "#281D77"; */
  color: rgb(0,0,125);
  font-weight: bold;
	font-size: 90%;
}

.AutoFloatHeader{
	padding: 0px;
	margin: 2px;

  /*
	font-size: 150%;

	background-color: rgb(186,205,228);

	box-shadow: 2px 2px 2px #dfdfdf;
	-moz-box-shadow: 2px 2px 2px #dfdfdf;
	-webkit-box-shadow: 2px 2px 2px #dfdfdf;
	*/
}

.AutoFloatNo:hover{
	/*
	background-color: rgb(200,218,240);
	*/
	background-color: rgb(186,205,228);
	color: rgb(0,0,125);

	font-size: 120%;
  font-weight: bold;

	box-shadow: 2px 2px 2px 2px #dfdfdf;
	-moz-box-shadow: 2px 2px 2px 2px #dfdfdf;
	-webkit-box-shadow: 2px 2px 2px 2px #dfdfdf;
}

.AutoFloatNoAct{
	/*
	background-color: rgb(200,218,240);
	*/
	background-color: rgb(186,205,228);
	color: rgb(0,0,125);

	font-size: 120%;
  font-weight: bold;

	box-shadow: 2px 2px 2px 2px #dfdfdf;
	-moz-box-shadow: 2px 2px 2px 2px #dfdfdf;
	-webkit-box-shadow: 2px 2px 2px 2px #dfdfdf;
}

#AutoFloat {
	display: none;
	visibility: hidden;
	height: 25em;
	text-align: center; 
}

#Flaggen {
	float: right;
	width: 10%;
	font-size: 50%;
}
.Flagge_DE {
	width: 40%;
	padding: 5%;
}
.Flagge_GB {
	width: 40%;
	padding: 5%;
}


/*
 * Zeilen in Listen 
 * g(erade) / u(ngerade)
 * bzw h(ighlight)
 */
tr.tr_magenta {
  color: white;
  background-color: rgb(255,0,255);
}
tr.tr_red {
  color: white;
  background-color: rgb(255, 0, 0);
}
tr.tr_blue {
  color: white;
  background-color: rgb(0,0,255);
}
tr.tr_g {
  background-color: rgb(200,218,240);
}
tr.tr_u {
  background-color: rgb(211,228,248);
}

tr.tr_uh {
  background-color: rgb(230, 211, 248);
  /* background-color: rgb(211,228,255);*/
}
tr.tr_gh {
  background-color: rgb(230, 211, 248);
  /* background-color: rgb(200,218,255);*/
}

tr.tr_analyse_h {
  background-color: rgb(186,205,228);
  vertical-align: middle;
  text-align: center;
}

tr.tr_analyse_g {
  background-color: rgb(200,218,240);
}

tr.tr_analyse_u {
  background-color: rgb(211,228,248);
}


td.td_analyse_h {
  background-color: rgb(176,196,240);
}

td.td_analyse_g {
  background-color: rgb(200,218,240);
}

td.td_analyse_u {
  background-color: rgb(211,228,248);
}


thead.ListeHead {
  font-weight:bold;
  font-size:90%;
  background-color: rgb(176,196,240);
}




.Liste {
	/* Aus https://neumorphism.io/#c0c0c0 */
	box-shadow:  1px 1px 2px #7d7d7d, -1px -1px 2px #ffffff;
	-webkit-box-shadow:  5px 5px 10px #7d7d7d, -5px -5px 10px #ffffff;

  border-top-width: 1em;
  border-bottom-width: 1em;
  border-left-width: 0;
  border-right-width: 0;
  border-color: lightgrey;
  border-style: solid;
}




.Anzeige {
	/* Aus https://neumorphism.io/#c0c0c0 */
	box-shadow:  1px 1px 2px #7d7d7d, -1px -1px 2px #ffffff;
	-webkit-box-shadow:  5px 5px 10px #7d7d7d, -5px -5px 10px #ffffff;

  border-top-width: 1em;
  border-bottom-width: 1em;
  border-left-width: 0;
  border-right-width: 0;
  border-color: lightgrey;
  border-style: solid;
}
.UnterAnzeige {
	/* Folgende beiden verhindern, dass die Liste ausbricht */
  width: 100%;
  overflow: auto;

	/*
	box-shadow:  1px 1px 2px #7d7d7d, -1px -1px 2px #ffffff;
	-webkit-box-shadow:  5px 5px 10px #7d7d7d, -5px -5px 10px #ffffff;
	*/

  border-top-width: 0.2em;
  border-bottom-width: 0.2em;
  border-left-width: 0;
  border-right-width: 0;
  border-color: lightgrey;
  border-style: solid;
}
.UnterAnzeigeTextVis {
}
.UnterAnzeigeTextInvis {
}


img.imgButton {
	border-radius: 6px;
	box-shadow:  5px 5px 10px #7d7d7d, 
							 -5px -5px 10px #ffffff;

  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

#Daten {
  border-color: lightgrey;
  border-style: solid;
  background-color: rgb(186,205,228);

  border: 0.2em solid lightgrey;
  float: left;
  width: 100%;
}

hr.MenuTrenner {
  border: 5px solid rgb(186,205,228);
	border-radius: 5px;
}

#Hauptbild {
  height: 140px;
	/* width: 140px; */
	padding: 5px;
}


div.BilderDateien {
  height: 50vh;
  overflow: auto;
}

img.EinzelBild {
  height: 48vh;
}





@media screen and (min-width:570px) { /* Normale Bildschirme */

#DebugFenster {
	display: none;
	height: 5em;
}

body {
	/* background-color: rgb(186,205,228); */
  color: #222;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
}

h1 {
	color: rgb(0, 0, 128);
}


h2 {
	color: rgb(0, 0, 128);
}


#Kopfbereich {
  height: 100px;
  color: rgb(0,0,125);

  border-left-style: solid;
  border-left-width: 2px;

  border-right-style: none;
  border-right-width: medium;

  border-top-style: none;
  border-top-width: medium;

  border-bottom-style: none;
  border-bottom-width: medium;

  font-size: 45px;
  font-family: sansserif;
}

#Menue_links_Header {
/*  background-color: #B0C4DE;*/
  border:2px rgb(0,0,125);
  float:left;
	/* width: 17%; */
  font-size: 15px;
  font-family: sansserif;
  display: none;
}

#Menue_links {
  border:2px rgb(0,0,125);
  float:left;
  width: 17%;
  font-size: 15px;
  font-family: sansserif;
}

#Inhalt {
  /*
   * Hauptcontainer fuer rechte Seite (Mitte und rechts)
   */
  border:30px rgb(0,0,125);
  font-size: 100%;
  font-family: sansserif;
  width: 100%;
}

#Inhalt_links {
  /*
   * Linker Teil der rechten Seite
   */
  /* background-color: rgb(186,205,228); */
  border:2px rgb(0,0,125);
  float:left;
  width: 70%;
  font-size: 15px;
  font-family: sansserif;
	padding-left: 1em;
	padding-top: 1em;
}


div.Hilfetext {
  /*
   * Eine als Hilfetextanzeige gedachte DIV
   */
  /*
	border-color: lightgrey;
	border-style: solid;
   */
  background-color: yellow; /*rgb(186,205,228);*/
  border:1px solid black; /*rgb(0,0,125);*/
  padding: 2px;
  position:absolute;
  top:0px; left: 0px;
  z-index:100;
  font-size: 10px;
  font-family: sansserif;
}


div.Overlay {
  /*
   * Eine als Informationsanzeige gedachte DIV
   */
	/*
	border-color: lightgrey;
	border-style: solid;
	*/
  background-color: rgb(186,205,228);
  border:5px solid rgb(0,0,125);
  padding: 5px;
  /* width: 90%;*/
  position:absolute;
  top:0px; left: 0px;
  z-index:5;
  font-size: 16px;
  font-family: sansserif;
}


#Javascript_Hinweis {
  border:4px rgb(255,0,0);
  background-color: rgb(255,0,0);
  float:left;
  width: 100%;
  font-size: 20px;
  font-family: sansserif;
}

#Logins {
/*  background-color: #B0C4DE;*/
  border:2px rgb(0,0,125);
  float:right;
  width: 25%;
  font-size: 15px;
  font-family: sansserif;
}

#Menue_rechts {
/*  background-color: #B0C4DE;*/
  border:2px rgb(0,0,125);
  float:right;
  width: 25%;
  font-size: 15px;
  font-family: sansserif;
}

#AnmeldeContainer {
  float: left;
  width: 32%;
  font-size: 17px;
  font-family: sansserif;
}
#Anmeldung {
  float: left;
  width: 100%;
  background-color: #B0C4DE;
  border-style: outset;
}
#Abmeldung {
  float: left;
  width: 100%;
  background-color: #B0C4DE;
  border-style: outset;
}


.DIV_Hinweise {
  background-color: rgb(211,228,248);
  border: 1px solid blue;
  display: none;
  visibility: hidden;
  padding: 2px;
}

.DIV_Edit {
  background-color: #B0C4DE;
  border: 1px solid blue;
  display: none;
  visibility: hidden;
  padding: 2px;
}

.DIV_Show {
  display: block;
  visibility: visible;
}

.DIV_MenuHead1{
	float:left;
	width: 94%;
}
.DIV_MenuHead2{
	float:left;
	width: 88%;
}
.DIV_MenuHead3{
	float:left;
	width: 82%;
}
.DIV_MenuHead4{
	float:left;
	width: 74%;
}
.DIV_MenuHead5{
	float:left;
	width: 68%;
}

.DIV_Icon {
	float:right;
	width: 6%;
}

.DIV_PlusMinus {
  font-size: 2em;
  font-family: sansserif;
}

.Adr_Rechts {
  width: 50%;
  float: right;
  display: inline;
}

.Adr_Links {
  width: 50%;
  float: left;
  display: inline;
}

.Google_Adr {
  background-color: rgb(176,196,255);
  margin: 8px 4px 4px 4px; /* top/right/bottom/left */
  padding: 8px 4px 4px 4px; /* top/right/bottom/left */
  border:2px solid rgb(0,0,125);
  display: none;
  visibility: hidden;
}

#facebook {
  float: left;
  width: 100%;
  background-color: rgb(255,255,255);
  border-style: none;
}

#UnterAnmeldung {
  float: left;
  width: 100%;
  background-color: rgb(255,255,255);
}

#PortalContainer {
  float: right;
  width: 67%;
  font-size: 12px;
  font-family: sansserif;
}

#PortalInfo {
  float: left;
  width: 49%;
  background-color: #66cc00;
/*  border-style: outset;*/
}

#PortalNews {
  float: right;
  width: 100%;
  font-size: 85%;
  background-color: #B0C4DE;
  color: rgb(255,255,255);

  padding: 0.2em;
}

img.ListenBild {
  height: 90px;
}

/*
img.EinzelBild {
  height: 68vh;
}

div.BilderDateien {
  height: 70vh;
  overflow: auto;
}
*/

div.Kontakte {
  height: 20em;
  overflow: auto;
}

div.Gratis_MedienP {
  height: 20em;
  overflow: auto;
}

div.AuswahlListe {
  height: 10em;
  overflow: auto;
  visibility: hidden;
  display: none;
}
div.ListenDaten {
  visibility: hidden;
  display: none;
}
div.AuswahlListeHinweis {
  visibility: hidden;
  display: none;
}
/*
div.AuswahlZeile {
  height: 20em;
  overflow: auto;
}
*/

div.Haelfte {
  float: left;
  width: 50%;
}
div.Drittel {
  float: left;
  width: 33%;
}


table.BilderDateienListe {
  /* height: 35&; 35& ist fehlerhaft: https://jigsaw.w3.org/css-validator/validator?uri=www.buchinfo.com&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en */
  border: 1px solid black;
	/* border-collapse: collapse; */
  text-align: left;
  color: rgb(0, 0, 125); 
	/* font-size: 1.8em; */
}


table.Liste {
  border: 1px solid black;
	/* border-collapse: collapse; */
  text-align: left;
	/* color: rgb(0, 0, 125); */
  font-size: 80%;
}

img.ListeImg {
  height: 100%;
  width: 100%;
}

div.row_g {
  background-color: rgb(176,196,220);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

div.row_u {
  background-color: rgb(176,196,240);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

div.row_s {
  background-color: rgb(176,196,255);
  margin: 8px 4px 4px 4px; /* top/right/bottom/left */
  padding: 8px 4px 4px 4px; /* top/right/bottom/left */
  border:4px solid rgb(0,0,125);
}

tr.row_g {
  background-color: rgb(176,196,220);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

tr.row_u {
  background-color: rgb(176,196,240);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

tr.row_s {
  background-color: rgb(176,196,255);
  margin: 8px 4px 4px 4px; /* top/right/bottom/left */
  padding: 8px 4px 4px 4px; /* top/right/bottom/left */
  border:4px solid rgb(0,0,125);
}

img.lycklogonav {
  width:2.25em;
  height:1.5em;
	/* 53 - 33 */
}

img.bilogonav {
  width:43px;
  height:30px;
}

a.FonC {
	visibility: visible;
	display: block;
}
a.FonS {
	visibility: hidden;
	display: none;
	
}

a.nav1, .nav1 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#6393ca;*/
  font-weight:bold;
  color:#000000;
  text-decoration:none;
  font-size:0.9em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  border-bottom:1px solid #ffffff;
}

a.nav1:hover {
  color:#ffffff;
  background-color: #B0C4DE;
}

a.navmarked1, .navmarked1 {
  color:#ffffff;
}

a.nav2, .nav2 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#c9dff5; */
  color:#000000;
  text-decoration:none;
  font-size:0.9em;
  display:block;
  padding:0.15em 0em 0.15em 2.5em;
}

a.nav2:hover {
  color:#ffffff;
  background-color: #B0C4DE;
}

a.navmarked2, .navmarked2 {
  font-weight:bold;
}

a.nav3, .nav3 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#c9dff5; */
  color:#000000;
  text-decoration:none;
  font-size:0.9em;
  display:block;
  padding:0.15em 0em 0.15em 3.5em;
}

a.nav3:hover {
  color:#ffffff;
  background-color: #B0C4DE;
}

a.navmarked3, .navmarked3 {
  font-weight:bold;
}

a.navswitch {
	padding:0.15em 0em 0.15em 1.5em;
}

img.navitogglesimg {
  margin-right:0.2em;
  vertical-align: middle;
  width: 0.8em;
  height: 0.8em;
}

img.imgupdn {
  width: 1.2em;
  height: 1.2em;
}

img.imgupdn_invisible {
  width: 1.2em;
  height: 1.2em;
}

textarea.Strasse {
  width: 100%;
  height: 7em;
}

textarea.Notiz {
  width: 400px;
  height: 7em;
  border: 1px solid;
}

select.ONIXnm {
}
select.ONIX {
  color: white;
  background-color: #4169E1;
  border: 1px solid;
}

checkbox.ONIXnm{
}
checkbox.ONIX {
  color: white;
  background-color: #4169E1;
  border: 1px solid;
}

input.ONIXnm {
}
input.ONIX {
  color: white;
  background-color: #4169E1;
  border: 1px solid;
}

textarea.ONIXnm {
  width: 400px;
  height: 7em;
  border: 1px solid;
}
textarea.ONIX {
  color: white;
  background-color: #4169E1;
  width: 400px;
  height: 7em;
  border: 1px solid;
}

/*
.Check, .Radio {
  width: 1em;
  height: 1em;
  display: block;
}
*/

a.nav4, .nav4, a.nav5, .nav5 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#c9dff5; */
  color:#000000;
  text-decoration:none;
  font-size:0.9em;
  display:block;
  padding:1px 5px 1px 20px;
}

a.nav4:hover, a.nav5:hover {
  color:#ffffff;
}

a.navmarked4, .navmarked4, a.navmarked5, .navmarked5 {
  font-weight:bold;
}

.TabTrenner {
  height: 0.2em;
  color: rgb(0, 0, 125);
  background-color: rgb(0, 0, 125);
}

.SubTabTrenner {
  height: 0.1em;
  color: rgb(0, 0, 125);
  background-color: rgb(0, 0, 125);
  margin-right: 2.5%;
}

#mehr {
  font-size:0.8em;
  font-weight:bold;
  color:#281d77;
  text-align:right;
}

a.button {
/* Silber */
  background-color: rgb(239,232,239);
  color:#000000;
  text-decoration:none;
  font-size:0.9em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  /* margin:3; fehlt unit */
/*  border: 2px solid #ffffff;*/
}

a.button:hover {
  color:#ffffff;
/* Gold */
  background-color: rgb(240,207,0);
}

a.buttonmarked {
/* Gold */
  background-color: rgb(240,207,0);
  color:#000000;
  text-decoration:none;
  font-size:0.9em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  margin:0;
/*  border: 2px solid #ffffff;*/
}

a.ButtonKlecksBlau {
      display:block;
      color:#000;
      background-color:#fff;
      width:150px;
      height:162px;
      padding:7px;
      font-size:14px;
      font-family:Verdana, Arial, sans-serif;
      font-weight:bold;
      text-decoration:none;
      text-align:center;
      margin:10px;
/*      border:3px solid #000;*/
/*  background-image:url(/bin/hinter.gif);*/
  background-image:url(/bin/blauerfarbklecks.jpg);
}
a.ButtonKlecksBlau:hover {
      display:block;
      color:#fff;
      background-color:#000;
}

a.ButtonKleckseBlau {
      display:block;
      color:#000;
      background-color:#fff;
      width:120px;
      height:15px;
      padding:10px;
      font-size:12px;
      font-family:Verdana, Arial, sans-serif;
      font-weight:bold;
      text-decoration:none;
      text-align:center;
      margin:1px;
/*      border:3px solid #000;*/
/*  background-image:url(/bin/hinter.gif);*/
  background-image:url(/Bilder/4blauefarbkleckse.jpg);
/* rgb 40, 141, 236 */
}

a.ButtonKleckseBlau:hover {
  display:block;
  background-color:#000;
  background-image:url(/Bilder/4goldfarbkleckse.jpg);
}


}




























/* Smartphones - Querformat */ 
/*@media screen and (max-width:569px) { */
@media screen and (max-width:849px) { 

*{
  font-size: 12px;
  /* color: rgb(0,0,125); */
}

input{
	font-size: 80%;
}
select{
	font-size: 80%;
}

#DebugFenster {
	display: none;
	height: 10em;
}

body {
	/* background-color: rgb(186,205,228);*/
  color: #222;
  font-family: Helvetica;
  margin: 0;
  padding: 0;
}

#header h1 {
  margin: 0;
  padding: 0;
}

#header h1 a {
  background-color:#ccc;
  border-bottom: 1px solid #666;
  color: #222;
  display: block;
  font-size: 150%;
  font-weight: bold;
  padding: 10px 0;
  text-align: center;
  text-decoration: none;
}

#menu ul {
  list-style: none;
  margin: 20px;
  padding: 0;
}

#menu ul li a{
  background-color:#FFF;
  border: 1px solid #999;
  color: #222;
  display: block;
  font-size: 105%;
  font-weight: bold;
  margin-bottom: -1px;
  padding: 24px 10px;
  text-decoration: none;
}

/*
------------------------------------------
*/

#Kopfbereich {
  height: 50px;
  color: rgb(0,0,125);

  border-left-style: solid;
  border-left-width: 2px;

  border-right-style: none;
  border-right-width: medium;

  border-top-style: none;
  border-top-width: medium;

  border-bottom-style: none;
  border-bottom-width: medium;

  font-size: 140%;
  font-family: sansserif;
}

#Menue_links {
  color: rgb(0,0,125);
  border:2px rgb(0,0,125);
  font-size: 90%;
  font-size: 17px;
  font-family: sansserif;
  /* durch color erledigt: font-color; rgb(0,0,125); */
  width: 100%;
}

#Menue_links_Header {
/*  background-color: rgb(0,0,125);/
/*  background-color:#6393ca;*/
  font-weight:bold;
  color: rgb(0,0,125);
  text-decoration:none;
  font-size:1.5em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  border-bottom:2px solid rgb(0,0,125);
}

#Inhalt_links {
  /*
   * Linker Teil der rechten Seite
   */
  border:3px rgb(0,0,125);
  width: 100%;
}

#Javascript_Hinweis {
  border:8px rgb(255,0,0);
  background-color: rgb(255,0,0);
  float:left;
  width: 100%;
  font-size: 71%;
  font-family: sansserif;
}

#Logins {
  border:2px rgb(0,0,125);
  font-size: 107%;
  font-family: sansserif;
}

#Menue_rechts {
/*  background-color: #B0C4DE;*/
  border:4px rgb(0,0,125);
  font-size: 107%;
  font-family: sansserif;
  width: 100%;
}

#AnmeldeContainer {
  font-size: 121%;
  font-family: sansserif;
}
#Anmeldung {
  width: 100%;
  background-color: #B0C4DE;
  border-style: outset;
}
#Abmeldung {
  width: 100%;
  background-color: #B0C4DE;
  border-style: outset;
  display: none;
}


.DIV_Edit {
  background-color: #B0C4DE;
  border: 1px solid blue;
  display: none;
  visibility: hidden;
  padding: 2px;
}

.DIV_Show {
  display: block;
  visibility: visible;
}

.DIV_MenuHead1{
	float:left;
	width: 90%;
}
.DIV_MenuHead2{
	float:left;
	width: 80%;
}
.DIV_MenuHead3{
	float:left;
	width: 70%;
}
.DIV_MenuHead4{
	float:left;
	width: 60%;
}
.DIV_MenuHead5{
	float:left;
	width: 50%;
}

.DIV_Icon {
	float:right;
	width: 10%;
}


#facebook {
  width: 100%;
  background-color: rgb(255,255,255);
  border-style: none;
}

#UnterAnmeldung {
  width: 100%;
  background-color: rgb(255,255,255);
}

#PortalContainer {
  font-size: 100%;
  font-family: sansserif;
}

#PortalInfo {
  background-color: #66cc00;
/*  border-style: outset;*/
}

#PortalNews {
  width: 100%;
  font-size: 85%;
  background-color: #B0C4DE;
  color: rgb(255,255,255);

  padding: 0.2em;
}


img.ListenBild {
  height: 90px;
}

/*
img.EinzelBild {
  height: 20em;
}
*/


div.Haelfte {
  float: left;
  width: 100%;
}
div.Drittel {
  float: left;
  width: 100%;
}



table.Liste {
  border: 1px solid black;
	/* border-collapse: collapse; */
  text-align: left;
	/* color: rgb(0, 0, 125); */
  font-size: 60%;
}

img.ListeImg {
  height: 100%;
  width: 100%;
}

div.row_g {
  background-color: rgb(176,196,220);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

div.row_u {
  background-color: rgb(176,196,240);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

div.row_s {
  background-color: rgb(176,196,255);
  margin: 8px 4px 4px 4px; /* top/right/bottom/left */
  padding: 8px 4px 4px 4px; /* top/right/bottom/left */
  border:4px solid rgb(0,0,125);
}

tr.row_g {
  background-color: rgb(176,196,220);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

tr.row_u {
  background-color: rgb(176,196,240);
  margin: 2px 0px 0px 0px; /* top/right/bottom/left */
  padding: 2px 0px 0px 0px; /* top/right/bottom/left */
  border-bottom:2px solid rgb(0,0,125);
}

tr.row_s {
  background-color: rgb(176,196,255);
  margin: 8px 4px 4px 4px; /* top/right/bottom/left */
  padding: 8px 4px 4px 4px; /* top/right/bottom/left */
  border:4px solid rgb(0,0,125);
}

img.lycklogonav {
  width:34px;
  height:20px;
}

img.bilogonav {
  width:15px;
  height:10px;
}

a.FonC {
	visibility: hidden;
	display: none;
}
a.FonS {
	visibility: visible;
	display: block;
}

a.nav1, .nav1 {
  font-weight:bold;
  color: rgb(0,0,125);
  text-decoration:none;
  font-size:1em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  border-bottom:2px solid rgb(0,0,125);
}

a.nav1:hover {
  color:#ffffff;
  background-color: #B0C4DE;
}

a.navmarked1, .navmarked1 {
  color:#ffffff;
}

a.nav2, .nav2 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#c9dff5; */
  color: rgb(0,0,125);
  text-decoration:none;
  font-size:0.8em;
  display:block;
  padding:0.15em 0em 0.15em 2.5em;
  border-bottom:1px solid rgb(0,0,125);
}


a.nav2:hover {
  color:#ffffff;
  background-color: #B0C4DE;
}

a.navmarked2, .navmarked2 {
  font-weight:bold;
}

a.nav3, .nav3 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#c9dff5; */
  color:#000000;
  text-decoration:none;
  font-size:0.75em;
  display:block;
  padding:0.15em 0em 0.15em 3.5em;
}

a.nav3:hover {
  color:#ffffff;
  background-color: #B0C4DE;
}

a.navmarked3, .navmarked3 {
  font-weight:bold;
}

a.navswitch {
	padding:0.15em 0em 0.15em 1.5em;
}

img.navitogglesimg {
  margin-right:0.2em;
  vertical-align: middle;
  width: 1em;
  height: 1em;
}

img.imgupdn {
  width: 2em;
  height: 2em;
}

textarea.Strasse {
  width: 100%;
  height: 7em;
}

textarea.Notiz {
  width: 100%;
  height: 5em;
  border: 1px solid #ffffff;
}

select.ONIXnm {
}
select.ONIX {
  color: white;
  background-color: #4169E1;
  border: 1px solid;
}

checkbox.ONIXnm{
}
checkbox.ONIX {
  color: white;
  background-color: #4169E1;
  border: 1px solid;
}

input.ONIXnm{
}
input.ONIX {
  color: white;
  background-color: #4169E1;
  border: 1px solid;
}

textarea.ONIXnm{
  width: 100%;
  height: 5em;
  border: 1px solid #ffffff;
}
textarea.ONIX {
  color: white;
  background-color: #4169E1;
  width: 100%;
  height: 5em;
  border: 1px solid #ffffff;
}

/*
.Check, .Radio {
  width: 100px;
  height: 100px;
  display: block;
}
*/

a.nav4, .nav4, a.nav5, .nav5 {
/*  background-color: rgb(0,0,125);/
/*  background-color:#c9dff5; */
  color:#000000;
  text-decoration:none;
  font-size:0.7em;
  display:block;
  padding:1px 5px 1px 20px;
}

a.nav4:hover, a.nav5:hover {
  color:#ffffff;
}

a.navmarked4, .navmarked4, a.navmarked5, .navmarked5 {
  font-weight:bold;
}

.TabTrenner {
  height: 0.25em;
  color: rgb(0, 0, 125);
  background-color: rgb(0, 0, 125); 
}

.SubTabTrenner {
  height: 0.15em;
  color: rgb(0, 0, 125);
  background-color: rgb(0, 0, 125); 
  margin-right: 2.5%;
}

#mehr {
  font-size:0.65em;
  font-weight:bold;
  color:#281d77;
  text-align:right;
}

#Menue_links_Inhaltupdn {
  height:60px;
}

a.button {
/* Silber */
  background-color: rgb(239,232,239);
  color:#000000;
  text-decoration:none;
  font-size:1.8em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  /* margin:3; unit? */
}

a.button:hover {
  color:#ffffff;
/* Gold */
  background-color: rgb(240,207,0);
}

a.buttonmarked {
/* Gold */
  background-color: rgb(240,207,0);
  color:#000000;
  text-decoration:none;
  font-size:1.8em;
  display:block;
  padding:0.25em 0em 0.25em 0.5em;
  margin:0;
/*  border: 2px solid #ffffff;*/
}

a.ButtonKlecksBlau {
      display:block;
      color:#000;
      background-color:#fff;
      width:150px;
      height:162px;
      padding:7px;
      font-size:50%;
      font-family:Verdana, Arial, sans-serif;
      font-weight:bold;
      text-decoration:none;
      text-align:center;
      margin:10px;
/*      border:3px solid #000;*/
/*  background-image:url(/bin/hinter.gif);*/
  background-image:url(/bin/blauerfarbklecks.jpg);
}
a.ButtonKlecksBlau:hover {
      display:block;
      color:#fff;
      background-color:#000;
}

a.ButtonKleckseBlau {
      display:block;
      color:#000;
      background-color:#fff;
      width:120px;
      height:15px;
      padding:10px;
      font-size:45%;
      font-family:Verdana, Arial, sans-serif;
      font-weight:bold;
      text-decoration:none;
      text-align:center;
      margin:1px;
/*      border:3px solid #000;*/
/*  background-image:url(/bin/hinter.gif);*/
  background-image:url(/Bilder/4blauefarbkleckse.jpg);
/* rgb 40, 141, 236 */
}

a.ButtonKleckseBlau:hover {
  display:block;
  background-color:#000;
  background-image:url(/Bilder/4goldfarbkleckse.jpg);
}

}